<%--
  Created by IntelliJ IDEA.
  User: 26488
  Date: 2021/11/27
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <%@ include file="/basePath.jsp"%>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css">
</head>
<body>
<%--PageInfo{pageNum=1, pageSize=6, size=6, startRow=1, endRow=6, total=904, pages=151,
 list=Page{count=true, pageNum=1, pageSize=6, startRow=0, endRow=6, total=904, pages=151,
  reasonable=true, pageSizeZero=false}, prePage=0, nextPage=2, isFirstPage=true,
  isLastPage=false, hasPreviousPage=false, hasNextPage=true, navigatePages=6,
  navigateFirstPage1, navigateLastPage6, navigatepageNums=[1, 2, 3, 4, 5, 6]}--%>
      <script src="static/js/jquery-3.6.0.js"></script>
      <script src="static/bootstrap/js/bootstrap.js"></script>
      <script>
          $(function (){
              function active(){
                  var pageNum=$(".next").attr("pageNum");
                  console.log(pageNum);
                 for(var i=0;i<$(".next").attr("navigatePages");i++){
                     var pagenum=$(".pageWithAjax").eq(i).attr("pageNumber");
                     if(pageNum==pagenum){
                         $(".pageWithAjax").eq(i).addClass("active");
                     }
                 }
              }
              function updatePageContent(result){
                  var pageTotal=result.extend.pageInfo.total;
                  var pages=result.extend.pageInfo.pages;
                  var pageN=result.extend.pageInfo.pageSize;
                  var page=parseInt(pageTotal % pageN);
                  $("table thead tr th input").prop("checked",false);
                  if(page==0){
                      pageN=result.extend.pageInfo.pageSize;
                      for(var i=0;i<pageN;i++){
                          $("table tbody tr").eq(i).children('td').eq(0).children('input').prop("checked",false);
                          $("table tbody tr").eq(i).children('td').eq(1).text(result.extend.pageInfo.list[i].empId);
                          $("table tbody tr").eq(i).children('td').eq(2).text(result.extend.pageInfo.list[i].empName);
                          $("table tbody tr").eq(i).children('td').eq(3).text(result.extend.pageInfo.list[i].gender=='m' ?"男":"女");
                          $("table tbody tr").eq(i).children('td').eq(4).text(result.extend.pageInfo.list[i].email);
                          $("table tbody tr").eq(i).children('td').eq(5).text(result.extend.pageInfo.list[i].dept.deptName).attr("deptId",result.extend.pageInfo.list[i].dept.deptId);
                      }
                  }else{
                  if(result.extend.pageInfo.pageNum !== parseInt(pages)){
                      pageN=result.extend.pageInfo.pageSize;
                      for(var i=0;i<pageN;i++){
                          $("table tbody tr").eq(i).children('td').eq(0).children("input").prop("checked",false);
                          $("table tbody tr").eq(i).children('td').eq(1).text(result.extend.pageInfo.list[i].empId);
                          $("table tbody tr").eq(i).children('td').eq(2).text(result.extend.pageInfo.list[i].empName);
                          $("table tbody tr").eq(i).children('td').eq(3).text(result.extend.pageInfo.list[i].gender=='m'?"男":"女");
                          $("table tbody tr").eq(i).children('td').eq(4).text(result.extend.pageInfo.list[i].email);
                          $("table tbody tr").eq(i).children('td').eq(5).text(result.extend.pageInfo.list[i].dept.deptName).attr("deptId",result.extend.pageInfo.list[i].dept.deptId);
                      }
                  }else {
                      pageN=page;
                      for(var i=0;i<pageN;i++){
                          $("table tbody tr").eq(i).children('td').eq(0).children("input").prop("checked",false);
                          $("table tbody tr").eq(i).children('td').eq(1).text(result.extend.pageInfo.list[i].empId);
                          $("table tbody tr").eq(i).children('td').eq(2).text(result.extend.pageInfo.list[i].empName);
                          $("table tbody tr").eq(i).children('td').eq(3).text(result.extend.pageInfo.list[i].gender=='m'?"男":"女");
                          $("table tbody tr").eq(i).children('td').eq(4).text(result.extend.pageInfo.list[i].email);
                          $("table tbody tr").eq(i).children('td').eq(5).text(result.extend.pageInfo.list[i].dept.deptName).attr("deptId",result.extend.pageInfo.list[i].dept.deptId);
                      }
                      for (var i=pageN;i<result.extend.pageInfo.pageSize;i++){
                          $("table tbody tr").eq(i).children('td').eq(0).children("input").prop("checked",false);
                          $("table tbody tr").eq(i).children('td').eq(1).text(" ");
                          $("table tbody tr").eq(i).children('td').eq(2).text(" ");
                          $("table tbody tr").eq(i).children('td').eq(3).text(" ");
                          $("table tbody tr").eq(i).children('td').eq(4).text(" ");
                          $("table tbody tr").eq(i).children('td').eq(5).text(" ").removeAttr("deptId");
                      }
                  }
                  }
                  $("#nowPageNum").val(result.extend.pageInfo.pageNum)
                  $("#nowPages").val(result.extend.pageInfo.pages)
                  $("#nowPageTotal").val(result.extend.pageInfo.total);
                  for (var i = 0; i < result.extend.pageInfo.navigatePages; i++) {
                      var pageNumber2 = result.extend.pageInfo.navigatepageNums[i];
                      $(".pageWithAjax").eq(i).attr("pageNumber", pageNumber2);
                      $(".pageWithAjax").eq(i).children("a").attr("href", "href="+"list?pageNumber="+pageNumber2);
                      $(".pageWithAjax").eq(i).children("a").text(pageNumber2);
                      if(pageNumber2==result.extend.pageInfo.pageNum){
                          $(".pageWithAjax").removeClass("active");
                          $(".pageWithAjax").eq(i).addClass("active");
                      }
                  }

              }
              active();
              $(".pageWithAjax").click(function (){
                  var pageNumber=$(this).attr("pageNumber");
                  $.getJSON("http://localhost:8080/crud/listWithAjax","pageNumber="+pageNumber,function (result){
                      updatePageContent(result);
                  });
                  $(".pageWithAjax").removeClass("active");
                  $(this).addClass("active");
                  event.preventDefault();
              })
              $(".previous").click(function (){
                  var pageNumber =parseInt($(".active").attr("pageNumber"))-1;
                  if(pageNumber<=0){
                  }
                  else{
                      $.getJSON("http://localhost:8080/crud/listWithAjax","pageNumber="+pageNumber,function (result) {
                              updatePageContent(result);
                          }
                      )
                  }
                  event.preventDefault();

              })
              $(".next").click(function (){
                  var pageNumber =parseInt($(".active").attr("pageNumber"))+1;
                  var pages=$(this).attr("pages");
                  if(pageNumber>pages){
                  }
                  else{
                      $.getJSON("http://localhost:8080/crud/listWithAjax","pageNumber="+pageNumber,function (result) {
                              updatePageContent(result);
                          }
                      )
                  }
                  event.preventDefault();

              })
              $(".lastPage").click(function () {
                  var pageNumber = $(".next").attr("pages");
                  $.getJSON("http://localhost:8080/crud/listWithAjax", "pageNumber=" + pageNumber, function (result) {
                          updatePageContent(result);
                      })
                  event.preventDefault();

              })
              $(".firstPage").click(function () {
                  var pageNumber = 1;
                  $.getJSON("http://localhost:8080/crud/listWithAjax", "pageNumber=" + pageNumber, function (result) {
                      updatePageContent(result);
                  })
                  event.preventDefault();
              })
              $("#addEmp").click(function (){
                  $.getJSON("http://localhost:8080/crud/getDepts",function (result) {
                      $("#select").empty();
                      $("<option></option>").append("请选择").attr("hidden",true).appendTo($("#select"));
                      $.each(result.extend.depts,function () {
                          var options=$("<option></option>").append(this.deptName).attr("value",this.deptId);
                          options.appendTo($("#select"));
                      })
                  })
              })
              $("#add").click(function (){
                  //alert($("#formList").serialize());
                  //1.关闭模态框
                  $("#staticBackdrop").modal('hide');
                  //2.跳转到最后一页
              })
              $(document).on("click",".updateEmp",function (){
                  // $("#updateName").val("");
                  // $("#updateEmail").val("");
                  // $("#formListUpdate input[name=gender]").val(['f']);
                  // $("#formListUpdate select").val([3]);
                  //1.回显dept
                  var DeptId=$(this).parent().parent().find("td:eq(5)").attr("deptId");
                  $.getJSON("http://localhost:8080/crud/getDepts",function (result) {
                      $("#updateSelect").empty();
                      $("<option></option>").append("请选择").attr("hidden",true).appendTo($("#select"));
                      $.each(result.extend.depts,function () {
                          var options=$("<option></option>").append(this.deptName).attr("value",this.deptId);
                          options.appendTo($("#updateSelect"));
                      })
                      $("#formListUpdate select[name=dId]").val([DeptId]);
                  })
                 // 2.回显Emp信息
                  var EmpId=$(this).parent().parent().find("td:eq(1)").text();
                  var EmpName=$(this).parent().parent().find("td:eq(2)").text();
                  var Gender=$(this).parent().parent().find("td:eq(3)").text().trim().replace(/\s/g,"");
                  var Email=$(this).parent().parent().find("td:eq(4)").text().trim().replace(/\s/g,"");
                  var gender;
                  if(Gender=="男"){
                      gender='m';
                  }else if(Gender=="女"){
                      gender='f';
                  }
                  $("#updateId").val(EmpId);
                  $("#updateName").val(EmpName);
                  $("#updateEmail").val(Email);
                  $("#formListUpdate input[name=gender]").val([gender]);
              })
              $("#update").click(function (){
                  //1.关闭模态框
                  $("#updaeModal").modal('hide');
                  //2.获取页码
                 var pageNumber= $(".ulPage .active").attr("pageNumber");
                 console.log(pageNumber);
                  //3.设置地址
                  $("#formListUpdate").attr("action","updateEmp/"+pageNumber);
              })
              $(document).on("click",".deleteEmp",function (){
                  var EmpId=$(this).parent().parent().find("td:eq(1)").text();
                  if(confirm("确定要删除["+EmpId+"]吗？")){
                      var pageNumber =parseInt($(".active").attr("pageNumber"));
                      $.ajax({
                          url:"http://localhost:8080/crud/deleteEmp/"+EmpId+"/"+pageNumber,
                          type:"DELETE",
                          dateType:"json",
                          success:function(result){
                          updatePageContent(result);
                      }})
                  }
              })
              $("#checkedAll").click(function(){
                  $(".checkedItem").prop("checked",$(this).prop("checked"));
              })
              $(document).on("click",".checkedItem",function () {
                  //alert($(".checkedItem:checked").length);
                  if($(".checkedItem:checked").length==$(".checkedItem").length){
                      $("#checkedAll").prop("checked",true);
                  }
                  else {
                      $("#checkedAll").prop("checked",false);
                  }
              })
              $("#deleteAllEmp").click(function () {
                  var listId=new Array();
                  $.each($(".checkedItem:checked"),function () {
                      var empId=$(this).parent().parent().find("td:eq(1)").text();
                      listId.push(empId);
                  })
                  if(listId.length==0){
                      alert("请选择要删除的信息");
                  }else{
                  if(confirm("确定要删除["+listId+"]吗？")){
                      var pageNumber =parseInt($(".active").attr("pageNumber"));
                      $.ajax({
                          url:"http://localhost:8080/crud/deleteEmp/"+listId+"/"+pageNumber,
                          type:"DELETE",
                          dateType:"json",
                          success:function(result){
                              updatePageContent(result);
                          }})
                  }
                  }
              })
          })
      </script>
      <div class="container-md border" style="min-width: 1000px;">
          <div class="row">
              <h1 class="col h1 text-danger text-center">员工信息</h1>
          </div>
          <div class="row">
              <button class="btn btn-info ml-auto" data-toggle="modal" data-target="#staticBackdrop" id="addEmp">增加</button>
              <!-- Modal -->
              <div class="modal  fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered modal-lg">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              <form action="addEmp" method="post" id="formList">
                                  <div class="form-group row">
                                      <input type="hidden"  class="form-control" name="pageNum" value="${pageInfo.total}">
                                  </div>
                                  <div class="form-group row">
                                      <label for="name" class="col-3 col-form-label">EmpName:</label>
                                      <input type="text" id="name" class="form-control col-9" name="empName" value="">
                                  </div>
                                  <div class="form-group row">
                                      <label for="email" class="col-3 col-form-label">Email:</label>
                                      <input type="text" id="email" class="form-control col-9" name="email" value="">
                                  </div>
                                  <div class="form-group row">
                                      <label  class="col-3">Gender:</label>
                                      <div class="col-9">
                                      <div class="form-check form-check-inline">
                                          <input type="radio" id="female" class="form-check-input" name="gender" value="f" checked>
                                          <label for="female" class="col-3 form-check-label">女</label>
                                      </div>
                                      <div class="form-check form-check-inline">
                                          <input type="radio" id="male" class="form-check-input" name="gender" value="m">
                                          <label for="male" class="col-3 form-check-label">男</label>
                                      </div>
                                      </div>
                                  </div>
                                  <div class="form-group row">
                                      <label for="email" class="col-3 col-form-label">Dept:</label>
                                      <select class="col-9 form-control" id="select" name="dId">
                                      </select>
                                  </div>
                                  <div class="form-group row">
                                        <button type="submit" class="btn btn-primary mx-auto" id="add">添加</button>
                                  </div>
                              </form>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                          </div>
                      </div>
                  </div>
              </div>
              <button class="btn btn-danger ml-3 mr-3" id="deleteAllEmp">删除</button>
          </div>
          <div class="row">
              <table class="table table-bordered text-center">
                  <thead>
                  <tr>
                      <th scope="col"><input type="checkbox" id="checkedAll"></th>
                      <th scope="col">id</th>
                      <th scope="col">name</th>
                      <th scope="col">gender</th>
                      <th scope="col">email</th>
                      <th scope="col">dept</th>
                      <th scope="col" class="text-center">操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <c:forEach var="i" begin="0" end="${pageInfo.pageSize-1}">
                  <tr>
                      <td><input type="checkbox" class="checkedItem"></td>
                      <td>${pageInfo.list[i].empId}</td>
                      <td>${pageInfo.list[i].empName}</td>
                      <td><c:if test="${pageInfo.list[i].gender=='m'}">
                          ${"男"}
                          </c:if>
                          <c:if test="${pageInfo.list[i].gender=='f'}">
                              ${"女"}
                          </c:if>
                      <td>${pageInfo.list[i].email}</td>
                      <td deptId="${pageInfo.list[i].dept.deptId}">${pageInfo.list[i].dept.deptName}</td>
                      <td class="d-flex justify-content-sm-around">
                          <button class="btn btn-sm btn-info updateEmp" data-toggle="modal" data-target="#updateModal">编辑</button>
                          <!-- Modal -->
                          <div class="modal  fade" id="updateModal" data-backdrop="static" data-keyboard="false" tabindex="-1"  aria-hidden="true">
                              <div class="modal-dialog modal-dialog-centered modal-lg">
                                  <div class="modal-content">
                                      <div class="modal-header">
                                          <h5 class="modal-title" >Modal title</h5>
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                              <span aria-hidden="true">&times;</span>
                                          </button>
                                      </div>
                                      <div class="modal-body">
                                          <form action="updateEmp" method="post" id="formListUpdate">
                                              <div class="form-group row">
                                                  <input type="hidden"  class="form-control" name="_method" value="put">
                                              </div>
                                              <div class="form-group row">
                                                  <input type="hidden" id="updateId" class="form-control" name="empId" value="">
                                              </div>
                                              <div class="form-group row">
                                                  <label for="updateName" class="col-3 col-form-label">EmpName:</label>
                                                  <input type="text" id="updateName" class="form-control col-9" name="empName" value="">
                                              </div>
                                              <div class="form-group row">
                                                  <label for="updateEmail" class="col-3 col-form-label">Email:</label>
                                                  <input type="text" id="updateEmail" class="form-control col-9" name="email" value="">
                                              </div>
                                              <div class="form-group row">
                                                  <label  class="col-3">Gender:</label>
                                                  <div class="col-9">
                                                      <div class="form-check form-check-inline">
                                                          <input type="radio" id="updateFemale" class="form-check-input" name="gender" value="f" checked>
                                                          <label for="updateFemale" class="col-3 form-check-label">女</label>
                                                      </div>
                                                      <div class="form-check form-check-inline">
                                                          <input type="radio" id="updateMale" class="form-check-input" name="gender" value="m">
                                                          <label for="updateMale" class="col-3 form-check-label">男</label>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="form-group row">
                                                  <label for="updateSelect" class="col-3 col-form-label">Dept:</label>
                                                  <select class="col-9 form-control" id="updateSelect" name="dId">
                                                  </select>
                                              </div>
                                              <div class="form-group row">
                                                  <button type="submit" class="btn btn-primary mx-auto" id="update">更新</button>
                                              </div>
                                          </form>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <button class="btn btn-sm btn-danger deleteEmp">删除</button>
                      </td>
                  </tr>
                  </c:forEach>
                  </tbody>
              </table>
          </div>
          <div class="row">
              <div class="col-5" style="font-size: 0.7rem;">
                  当前为 <input type="text" value="${pageInfo.pageNum}" class="pageNum text-center" id="nowPageNum" style="max-width: 5rem;"> 页,总共 <input type="text" value="${pageInfo.pages}" class="text-center" id="nowPages" style="max-width: 5rem;"> 页，共 <input type="text" value="${pageInfo.total}" style="max-width: 5rem;" class="text-center" id="nowPageTotal"> 条记录
              </div>
              <div class="col-7">
                  <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end ulPage">
                        <li class="page-item firstPage"><a href="list?pageNumber=1" class="page-link">首页</a></li>
                            <li class="page-item previous">
                                <a class="page-link" href="#">Previous</a>
                            </li>

                        <c:forEach items="${pageInfo.navigatepageNums}" var="pageNum">
                            <li class="page-item pageWithAjax" pageNumber="${pageNum}"><a class="page-link" href="list?pageNumber=${pageNum}">${pageNum}</a></li>
                        </c:forEach>
                      <li class="page-item next" pagesize="${pageInfo.pageSize}" pages="${pageInfo.pages}" pageTotal="${pageInfo.total}" pageNum="${pageInfo.pageNum}" navigatePages="${pageInfo.navigatePages}" navigatepageNums="${pageInfo.navigatepageNums}">
                          <a class="page-link" href="list?pageNumber=${pageInfo.pageNum+1}">Next</a>
                      </li>
                        <li class="page-item lastPage"><a href="list?pageNumber=${pageInfo.pages}" class="page-link">末页</a></li>
                    </ul>
                  </nav>
              </div>
          </div>
      </div>


</body>
</html>
